<template>
  <div>
    <div class="head">
      <component-head></component-head>
    </div>
    <div class="listcontet">
        <div class="filter">
          <div :class="['saleleft', {
            active: orderBy.type ==='sale'
          }]" 
            @click="salechange">
            <span>销量</span>
            <div :class="['sale', 'up', {
              active: orderBy.type ==='sale' && orderBy.num ===1
            } ]"></div>
            <div :class="['sale', 'down', {
              active: orderBy.type ==='sale' && orderBy.num ===0
            }] "></div>
          </div>
          <div :class="['priceright', {
              active: orderBy.type ==='price'
          }]" @click="pricechange">
            <span>价格</span>
            <div :class="['price', 'up', {
              active: orderBy.type ==='price' && orderBy.num ===1
            }]"></div>
            <div :class="['price', 'down', {
              active: orderBy.type ==='price' && orderBy.num ===0
            }]"></div>
          </div>
        </div>
          <list-recommod 
            :items='items'
            @click ="enterdetail"
            @addcarCat="addcarCat"></list-recommod>
     </div>
       <mybarba></mybarba>
  </div>
    
</template>

<script>
import mybarba from '@/components/mybarba'
import ComponentHead from '@/components/componentHead'
import ListRecommod from '@/views/Itemlist/component/ListRecommod'
import { fetchitems } from '@/api/request'
import { mapState, mapMutations } from 'vuex'
import { Toast } from 'vant'
export default {
  components: {
    ComponentHead,
    ListRecommod,
    mybarba
  },
  data () {
    return {
      orderBy: {
        type: 'sale',
        num: 0,
      },
      items: [],
      sort: 'ordersUp'
    }
  },
  computed: {
    ...mapState({
      addCar: (state) => state.cardata.items
    })
  },
  created () {
    this.fetchItems()
  },
  methods: {
    // 添加购物车
    addcarCat (item) {
      this.setAddCar(item)
      this.PriceTotal()
    },
    // 进入详情页
    enterdetail (id) {
      this.$router.push(`/detail/${id}`)
    },
    // 请求商品列表数据
    fetchItems () {
      let params = {
        categoryId: this.$route.params.categoryId,
        orderBy: this.sort
      }
      fetchitems (params).then(res => {
        this.items = res.data.data
      })
    },
    // 点击销量触发的事件函数
    salechange () {
      if(this.orderBy.type === 'price'){
        this.orderBy.type = 'sale'
        this.orderBy.num = 1
        this.sort = 'ordersUp'
      }
      if(this.orderBy.num === 1){
        this.orderBy.num = 0
        this.sort = 'ordersDown'
      }else{
        this.orderBy.num = 1
        this.sort = 'ordersUp'
      }
      this.fetchItems()
    },
    // 点击价格触发的事件函数
    pricechange () {
      if(this.orderBy.type === 'sale'){
        this.orderBy.type = 'price'
        this.orderBy.num = 0
        this.sort = 'priceDown'
      }
      if(this.orderBy.num === 1){
        this.orderBy.num = 0
        this.sort = 'priceDown'
      }else{
        this.orderBy.num = 1
        this.sort = 'priceUp'
      }
      this.fetchItems()
    },
    ...mapMutations("cardata", ['setAddCar', 'PriceTotal'])
  }
}
</script>

<style lang="scss" scoped>
  .listcontet{
    margin-top: 46px;
    font-size: 16px;
    position: relative;
    .filter{
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: red;
      height: 47px;
      position: fixed;
      top: 45px;
      left: 0;
      width: 100%;
      z-index: 2;
      .saleleft,.priceright{
        position: relative;
        &.active{
        color: green;
      }
      }
      .sale,.price{
        width: 0;
        height: 0;
        border: 5px solid transparent;
        position: absolute;
        right: -13px;
        &.up{
          border-bottom-color: black;
            position: absolute;
            top: -4px;
          &.active{
            border-bottom-color: green;
          }
        }
        &.down{
          border-top-color: black;
            position: absolute;
            bottom: -4px;
          &.active{
              border-top-color: green;
            }
        }
      }
    }
  }
</style>
